<template>
	<div class="echarts2">
		<div style="width: auto; height: 470px" id="echarts2"></div>
	</div>
</template>

<script>
export default {
	name: "FronteCharts2",
	data() {
		return {
			option: {
				title: {
					text: "产品分类",
					left: "center",
				},
				tooltip: {
					trigger: "item",
				},
				legend: {
					orient: "vertical",
					left: "left",
				},
				series: [
					{
						name: "Access From",
						type: "pie",
						radius: "50%",
						data: this.data,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)",
							},
						},
					},
				],
			},
			chart: null,
		}
	},
	props: {
		data: {
			type: Array,
			default: () => [{ value: "", name: "" }],
		},
	},
	watch: {
		data: {
			handler(nv, ov) {
				if (nv.length > 0) {
					this.option.series[0].data = nv
				} else {
					this.option.series[0].data = ov
				}
				this.chart.setOption(this.option)
			},
			deep: true,
		},
	},
	mounted() {
		this.chartInit()
	},

	methods: {
		chartInit() {
			if (this.chartInit) {
				this.chart = this.$echarts.init(document.getElementById("echarts2"), "vintage")
				this.chart.setOption(this.option, true)
				this.chart.resize()
			}
		},
	},
}
</script>

<style scoped></style>
